import {deepCopyObj} from '../../assets/js/help.js'

/**
 * 设置表格（设置其列的显示顺序及显示状况）
 */
export default {
  methods: {
    //点击设置框内的上下箭头,对应移动该列
    moveColumnFn (index, isUp, second_i) {
      let _this = this;
      let _upIndex = this.theadsArr[0].prop == 'reno' ? 1 : 0;
      if(second_i == undefined) {
        if(isUp && index == _upIndex) {
          this.showToast('当前已是第一列！', 0, 1000);
          return;
        }
        if(!isUp && index == this.theadsArr.length - 1) {
          this.showToast('当前已是最后一列！', 0, 1000);
          return;
        }
        this.isReload = true;
        let theadArr = this.theadsArr;
        let thisColumn = theadArr.splice(index, 1);
        let _idx = isUp ? index - 1 : index + 1;
        thisColumn[0].isShow = false;
        theadArr.splice(_idx, 0, thisColumn[0]);
      } else {
        if(isUp && second_i == 0) {
          this.showToast('当前已是第一列！', 0, 1000);
          return;
        }
        if(!isUp && second_i == this.theadsArr[index].children.length - 1) {
          this.showToast('当前已是最后一列！', 0, 1000);
          return;
        }
        this.isReload = true;
        let sec_theadArr = this.theadsArr[index].children;
        let thisColumn = sec_theadArr.splice(second_i, 1);
        let _idx = isUp ? second_i - 1 : second_i + 1;
        thisColumn[0].isShow = false;
        sec_theadArr.splice(_idx, 0, thisColumn[0]);
      }
      
      //此举的目的是 重新渲染表格，解决在有二级表头的情况下,设置表格时，会有横向滚动条消失和第二层表头多次渲染的bug
      //因为 v-if="false" 的时候回销毁元素或者组件，true的是重新渲染
      this.$nextTick(function(){
        this.isReload = false;
      })
    },
    //显示或隐藏某一列
    displayColumnFn (index, isChecked, second_i) {
      this.isReload = true;
      let thisColumn = this.theadsArr[index]
      if(second_i !== undefined) {
        thisColumn = thisColumn.children[second_i]
      }
      thisColumn.checked = !isChecked
      // 在有二级菜单的情况下，如果设置一级表头的显示状态，则其子表头的状态都与其相同
      let children = thisColumn.children
      if (children) {
        for (let i = 0, len = children.length; i < len; i++) {
          children[i].checked = !isChecked
        }
      } else {
        if(second_i !== undefined) {
          let _arr = this.theadsArr[index]
          let _children = _arr.children
          let checkedLen = 0
          _children && _children.forEach(item => {
            if (item.checked) {
              checkedLen++
            }
          })
          if (checkedLen === 0) {
            _arr.checked = false
          } else {
            _arr.checked = true
          }
        }
        
      }
      
      this.$nextTick(() => {
        this.isReload = false
      })
    },
    //鼠标hover到表格设置行的时候
    showOperation (index, second_i) {
      let Item = null
      if(second_i == undefined) {
        Item = this.theadsArr[index]
      } else {
        Item = this.theadsArr[index].children[second_i]
      }
      Item.isShow = true;
      let hoverThItem = deepCopyObj(Item);
      let width = hoverThItem.width || hoverThItem.minWidth;
      this.singleThWidth = width;
    },
    //鼠标离开表格设置行的时候
    hideOperation (index, second_i) {
      if(second_i == undefined) {
        this.theadsArr[index].isShow = false;
      } else {
        this.theadsArr[index].children[second_i].isShow = false;
      }
    },
    handleHeaderDragend (newWidth, oldWidth, column, event) {
      let prop = column.property
      let level = column.level
      let index = -1
      let Item = null
      let _index = ''
      let attr = ''
      let theadsArr = this.theadsArr

      if (level > 1) {
        let indexArr = theadsArr.findInDyaticArrByKey('prop', prop)
        let s_idx = -1
        let s_index = ''
        if (Number.isInteger(indexArr)) {
          index = indexArr
        } else {
          index = indexArr[0]
          s_idx = indexArr[1]
          s_index = '-' + s_idx
        }
        Item = theadsArr[index]
        _index = Item.index + s_index
      } else {
        index = theadsArr.findByKey('prop', prop)
        Item = theadsArr[index]
        _index = Item.index
      }
      attr = Number.isInteger(Item.width) ? 'wid' : 'minW'
      this.saveItemWidth(_index, newWidth, attr)
    },
    resetWidth (index, width, second_i) {
      let Item = this.theadsArr[index];
      let _index = Item.index;
      if(second_i !== undefined) {
        _index += '-' + second_i;
        Item = this.theadsArr[index].children[second_i];
      }
      width = Number(width);
      if(!Number.isInteger(width)) {
        this.showToast(this.langObj.display_msg_inputnumber_error, 2, 1200);
        return;
      }

      if(width <= 0) {
        this.showToast(this.langObj.display_msg_lesszero_error, 2, 1200);
        return;
      }
      
      if(Number.isInteger(Item.width)) {
        if(width !== Item.width) {
          Item.width = width;
          this.saveItemWidth(_index, width, 'wid');
        }
      }
      if(Number.isInteger(Item.minWidth)) {
        if(width !== Item.minWidth) {
          Item.minWidth = width;
          this.saveItemWidth(_index, width, 'minW');
        }
      }
    },
    saveItemWidth (key, width, widthName) {
      let name = this.thisRouter;
      let _storage = sessionStorage.getItem(name)
      _storage = _storage ? JSON.parse(_storage) : {}
      let widthObj = _storage[widthName] ? _storage[widthName] : {}
      widthObj[key] = width;
      _storage[widthName] = widthObj;
      sessionStorage.setItem(name,JSON.stringify(_storage));
      this.saveSetting();
    },
    //切换表格的设置框的显示隐藏状态
    toggleSettingFn () {
      if(this.isShowSetting) {
        this.hideSettingBoxFn();
      } else {
        this.showSettingBoxFn();
      }
    },
    //显示表格设置框
    showSettingBoxFn () {
      this.isShowSetting = true;
      this.$store.commit('ISMASK_TOGGLE', true);
    },
    //隐藏表格设置框
    hideSettingBoxFn () {
      this.isShowSetting  = false;
      this.saveSetting();
    }
  }
}